<template>
<div>
    <el-table height="520" :data="tableDataList" style="width: 100%" border :tooltip-effect="'dark'">
      <template v-for="(item, index) in columnData">
        <!-- [{label:'姓名',pro:'name'}] -->
        <el-table-column :prop="item.prop" :key="index" :label="item.label"  align="center" 
        :width="item.width"  :show-overflow-tooltip="item['show-overflow-tooltip'] !== undefined&&item['show-overflow-tooltip']">
      </el-table-column>
      </template>
    </el-table>
  <el-pagination class="pg" layout="total, sizes, prev, pager, next, jumper"
    @size-change="handleSizeChange" @current-change="handleCurrentChange"
    :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize"
    :total="total" background></el-pagination>
   </div>
</template>
<script>
export default{
  name:'Pagination3',
  props: {
  // 总页数
  total: {
    type: Number,
    default: 1000,
    required: false
  },
  // 单页数据量
  pageSize: {
    type: Number,
    default: 10,
    required: false
  },
  // 当前页码
  currentPage: {
    type: Number,
    default: 1,
    required: false
  },
  // 表格数据
  tableDataList: {
    type: Array,
    default: [],
    required: false
  },
  // 表头数据
  columnData: {
    type: Array,
    default: [],
    required: false
   }
  },
  data(){
    return{
    }
  },
  methods: {
      // 以下两个函数均是触发父组件的handleChange事件，从而实现点击分页的功能按钮后，把最新的 pageSize currentPage 传给父组件 
      handleCurrentChange(currentPage) {
        this.$emit('handleChange', this.pageSize, currentPage)
      },
      handleSizeChange(pageSize) {
        this.$emit('handleChange', pageSize, this.currentPage)
      }
   }
}
</script>

<style lang="scss" scoped>
.pg {
  margin-top: 20px;
}
</style>